<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>入驻文件打印</title>
    <link rel="stylesheet" href="../static/lib/bootstrap/css/bootstrap.min.css"
          th:href="@{/lib/bootstrap/css/bootstrap.min.css}"/>
</head>
<body ng-app="print-file" ng-controller="c1">
<nav class="navbar navbar-default">
    <div class="container">
        <form name="dateForm" class="form-inline navbar-right navbar-form">
            <div class="input-group ">
                <span class="input-group-addon">开始日期</span>
                <input name="beginDate" type="text" class="form-control" uib-datepicker-popup="yyyy/MM/dd"
                       ng-model="begin.date"
                       is-open="begin.isOpen" close-text="关闭" current-text="今天" clear-text="清除"
                       datepicker-options="dateOptions" ng-required="true">
                <span class="input-group-btn">
                        <button type="button" class="btn btn-default" ng-click="openSelector1()"><i
                                class="glyphicon glyphicon-calendar"></i></button>
            </span>
            </div>
            <div class="input-group ">
                <span class="input-group-addon">截止日期</span>
                <input name="beginDate" type="text" class="form-control" uib-datepicker-popup="yyyy/MM/dd"
                       ng-model="end.date"
                       is-open="end.isOpen" close-text="关闭" current-text="今天" clear-text="清除"
                       datepicker-options="dateOptions" ng-required="true">
                <span class="input-group-btn">
                        <button type="button" class="btn btn-default" ng-click="openSelector2()"><i
                                class="glyphicon glyphicon-calendar"></i></button>
            </span>
            </div>
        </form>
    </div>
</nav>
<div class="container">
    <uib-tabset>
        <uib-tab index="0" heading="入驻通知书">
            <div class="row text-right page-header">
                <button class="btn btn-primary" ng-click="printFile1()">打印</button>
            </div>
            <div class="col-xs-8 col-xs-offset-2" id="file1">
                <h1 class="text-center">演武创客空间入驻通知书</h1>
                <h2 style="margin-top: 40px"><span th:text="${team.teamName}">TPW</span>团队：</h2>
                <h4 style="text-indent: 2em">欢迎入驻演武创客空间！</h4>
                <h4 style="text-indent: 2em">贵团队本次入驻期间为{{formatDate(begin.date)}}至{{formatDate(end.date)}}。</h4>
                <h4 style="text-indent: 2em">本次分配的工位如下：
                    <ul class="list-unstyled" th:each="seat : ${team.seats}">
                        <li><span th:text="${seat.roomNo}">213</span>室<span th:text="${seat.seatNo}">1</span>号工位</li>
                    </ul>
                </h4>
                <h4 style="text-indent: 2em">一般地，团队入驻后需于次月提交中期考核材料，期满前一周提交期满考核报告。入驻期间，请严格遵守演武创客空间相关规章制度。</h4>
                <h4 style="margin-top: 80px" class="text-right">演武创客空间</h4>
                <h4 style="margin-top: 10px;" class="text-right">{{formatDate(currentDate)}}</h4>
            </div>
        </uib-tab>
        <uib-tab index="1" heading="安全承诺书">
            <div class="row text-right page-header">
                <button class="btn btn-primary" ng-click="printFile2()">打印</button>
            </div>
            <div class="col-xs-8 col-xs-offset-2" id="file2">
                <h1 class="text-center">演武创客空间安全承诺书</h1>
                <h4 style="margin-top: 40px;text-indent: 2em ;line-height: 2em">
                    <span th:text="${team.teamName}">TPW</span>团队承诺,入驻演武创客空间期间（{{formatDate(begin.date)}}——{{formatDate(end.date)}}），
                    将严格遵守《演武创客空间管理制度》、《演武创客空间安全管理制度》与学校学院有关规定。
                    如因团队人员违反规定发生安全事故，造成人身伤害和财产损失，团队与相关人员愿承担相应责任。
                </h4>
                <h4 style="margin-top: 80px;padding-right: 5em" class="text-right">团队负责人（签字）：</h4>
                <h4 style="margin-top: 30px;" class="text-right">{{formatDate(currentDate)}}</h4>
                <h4 style="margin-top: 50px;">所在院系：</h4>
                <h4 style="margin-top: 1em">学号：</h4>
                <h4 style="margin-top: 1em">身份证号：</h4>
            </div>
        </uib-tab>
    </uib-tabset>
</div>
<script type="text/javascript" src="../static/lib/moment/moment.min.js" th:src="@{/lib/moment/moment.min.js}"></script>
<script type="text/javascript" src="../static/lib/jquery/jquery.js" th:src="@{/lib/jquery/jquery.min.js}"></script>
<script type="text/javascript" src="../static/lib/jquery.print/jQuery.print.min.js"
        th:src="@{/lib/jquery.print/jQuery.print.min.js}"></script>
<script type="text/javascript" src="../static/lib/angular/angular.js" th:src="@{/lib/angular/angular.min.js}"></script>
<script type="text/javascript" src="../static/lib/angular-ui-bootstrap/ui-bootstrap.js"
        th:src="@{/lib/angular-ui-bootstrap/ui-bootstrap.js}"></script>
<script type="text/javascript" src="../static/lib/angular-ui-bootstrap/ui-bootstrap-tpls.js"
        th:src="@{/lib/angular-ui-bootstrap/ui-bootstrap-tpls.js}"></script>
<script type="text/javascript" th:inline="javascript">
    angular
        .module("print-file", ["ui.bootstrap"])
        .controller("c1", [
            "$scope"
            , function ($scope) {
                $scope.currentDate = new Date();

                $scope.begin = {
                    date: new Date(),
                    isOpen: false
                };

                $scope.end = {
                    date: moment(new Date()).add(3, "months").toDate(),
                    isOpen: false
                };

                $scope.openSelector1 = function () {
                    $scope.begin.isOpen = true;
                };

                $scope.openSelector2 = function () {
                    $scope.end.isOpen = true;
                };

                // 格式化日期
                $scope.formatDate = function (date) {
                    return moment(date).format(" YYYY 年 MM 月 DD 日 ");
                };

                /*<![CDATA[*/
                var stylesheetUrl = /*[[@{/lib/bootstrap/css/bootstrap.min.css}]]*/ "./static/lib/bootstrap/css/bootstrap.min.css" ;
                /*]]>*/
                var printConfig = {
                    globalStyles: true,
                    stylesheet: stylesheetUrl

                };

                $scope.printFile1 = function () {
                    $("#file1").print(printConfig);
                };

                $scope.printFile2 = function () {
                    $("#file2").print(printConfig);
                };
            }]);
</script>
</body>
</html>